<template>
  <div class="page-container">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>自动化营销</el-breadcrumb-item>
        <el-breadcrumb-item>高级管理</el-breadcrumb-item>
        <el-breadcrumb-item>短信触达设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--内容-->
    <div>
      <el-row style="margin-bottom: 10px;"><h3 style="float: left">短信触达设置</h3></el-row>
      <el-row style="margin-bottom: 40px;">
        <p style="float: left">用于用户旅程中的短信触达限制，进行设置后，全平台按时间优先级发送短信信息，到达限制次数后，将不再给用户发送短信。</p>
      </el-row>

      <el-row style="margin-bottom: 10px;"><h4 style="float: left">每人限发短信数量：</h4></el-row>
      <el-form :label-position="labelPosition" :model="dataForm" :rules="dataFormRules" :size="size" ref="dataForm">
        <el-card class="box-card">
          <div slot="header"><span>定义组1：</span></div>
          <el-form-item label="限制时间范围：">
            <span class="spanTop">每天</span>
          </el-form-item>
          <el-row>
            <el-col>
              <el-form-item label="限制次数：" prop="numberLimit" label-width="120px;">
                <el-input type="text" v-model.number="dataForm.numberLimit"
                          maxlength="5"
                          @input="dataForm.numberLimit=dataForm.numberLimit.replace(/[^\d.]/g,'')"
                          placeholder="请输入"
                          style="width: 400px;"
                          clearable>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>

      <el-form :label-position="labelPosition" :model="dataForm2" :rules="dataFormRulesWeek" :size="size" ref="dataForm2">
        <el-card class="box-card">
          <div slot="header"><span>定义组2：</span></div>
          <el-form-item label="限制时间范围：">
            <span class="spanTop">每周</span>
          </el-form-item>
          <el-form-item label="限制次数：" prop="numberLimit">
            <el-input type="text" v-model.number="dataForm2.numberLimit"
                      maxlength="5"
                      @input="dataForm2.numberLimit=dataForm2.numberLimit.replace(/[^\d.]/g,'')"
                      placeholder="请输入"
                      style="width: 400px;"
                      clearable>
            </el-input>
          </el-form-item>
        </el-card>
      </el-form>

      <el-form :label-position="labelPosition" :model="dataForm3" :rules="dataFormRulesMonth" :size="size" ref="dataForm3">
        <el-card class="box-card">
          <div slot="header"><span>定义组3：</span></div>
          <el-form-item label="限制时间范围：">
            <span class="spanTop">每月</span>
          </el-form-item>
          <el-form-item label="限制次数：" prop="numberLimit">
            <el-input type="text" v-model.number="dataForm3.numberLimit"
                      maxlength="5"
                      @input="dataForm3.numberLimit=dataForm3.numberLimit.replace(/[^\d.]/g,'')"
                      placeholder="请输入"
                      style="width: 400px;"
                      clearable>
            </el-input>
          </el-form-item>
        </el-card>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button :size="size" type="primary" @click.native="submitForm" :disabled="disabledBtn">确定保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      let this_ = this
      let isNumber = (rule, value, callback) => {
        if (value == null || value === '') {
          callback()
        }
        if (value < 1) {
          return callback(new Error('请输入正数字'))
        }
        callback()
      }
      let isNumber2 = (rule, value, callback) => {
        if (value == null || value === '') {
          callback()
        }
        let param = {
          dayNumberLimit: this_.dataForm.numberLimit,
          weekNumberLimit: this_.dataForm2.numberLimit,
          monthNumberLimit: this_.dataForm3.numberLimit
        }
        if (value < 1) {
          return callback(new Error('请输入正数字'))
        } else {
          // 一天 <= 一周
          if (Number(param.weekNumberLimit) < Number(param.dayNumberLimit)) {
            return callback(new Error('长时间周期的次数需大于等于短周期的次数'))
          }
          callback()
        }
      }
      let isNumber3 = (rule, value, callback) => {
        if (value == null || value === '') {
          callback()
        }
        let param = {
          dayNumberLimit: this_.dataForm.numberLimit,
          weekNumberLimit: this_.dataForm2.numberLimit,
          monthNumberLimit: this_.dataForm3.numberLimit
        }
        if (value < 1) {
          return callback(new Error('请输入正数字'))
        } else {
          // 一周 <= 一月
          if (Number(param.monthNumberLimit) < Number(param.dayNumberLimit) || Number(param.monthNumberLimit) < Number(param.weekNumberLimit)) {
            return callback(new Error('长时间周期的次数需大于等于短周期的次数'))
          }
          callback()
        }
      }

      return {
        HEIGHT: window.innerHeight,
        labelPosition: 'right',
        size: 'small',
        disabledBtn: false,
        dataForm: {
          timeLimit: '1',
          numberLimit: ''
        },
        dataForm2: {
          timeLimit: '2',
          numberLimit: ''
        },
        dataForm3: {
          timeLimit: '3',
          numberLimit: ''
        },
        dataFormRules: {
          numberLimit: [{required: true, validator: isNumber, trigger: 'blur'}]
        },
        dataFormRulesWeek: {
          numberLimit: [{required: true, validator: isNumber2, trigger: 'blur'}]
        },
        dataFormRulesMonth: {
          numberLimit: [{required: true, validator: isNumber3, trigger: 'blur'}]
        }
      }
    },

    mounted() {
      this.getSmsInfo()
    },

    methods: {
      // 获取短信设置信息
      getSmsInfo() {
        let that = this
        this.utils.request.getListAllSms({}, function (res) {
          if (res.code == '0000' && res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              if (res.data[i].timeLimit == 1) {
                that.dataForm = res.data[i]
                if (that.dataForm.numberLimit < 1) {
                  that.dataForm.numberLimit = null
                }
              }
              if (res.data[i].timeLimit == 2) {
                that.dataForm2 = res.data[i]
                if (that.dataForm2.numberLimit < 1) {
                  that.dataForm2.numberLimit = null
                }
              }
              if (res.data[i].timeLimit == 3) {
                that.dataForm3 = res.data[i]
                if (that.dataForm3.numberLimit < 1) {
                  that.dataForm3.numberLimit = null
                }
              }
            }
          }
        })
      },

      // 新增或者修改短信设置信息
      submitForm() {
        let dayLimit = this.dataForm.numberLimit == null || this.dataForm.numberLimit === ''
        let weekLimit = this.dataForm2.numberLimit == null || this.dataForm2.numberLimit === ''
        let monthLimit = this.dataForm3.numberLimit == null || this.dataForm3.numberLimit === ''
        if (dayLimit && weekLimit && monthLimit) {
          this.$message({message: '请设置短信限制次数', type: 'warning'})
          return
        }

        let validFrom1 = true
        let validFrom2 = true
        let validFrom3 = true
        this.$refs.dataForm.validate(valid => {
          validFrom1 = valid
        })
        this.$refs.dataForm2.validate(valid => {
          validFrom2 = valid
        })
        this.$refs.dataForm3.validate(valid => {
          validFrom3 = valid
        })

        if (validFrom1 && validFrom2 && validFrom3) {
          this.disabledBtn = true
          let params = {tSmsTouchSettingsRequests: []}
          params.tSmsTouchSettingsRequests.push(this.dataForm)
          params.tSmsTouchSettingsRequests.push(this.dataForm2)
          params.tSmsTouchSettingsRequests.push(this.dataForm3)
          let that = this
          this.utils.request.saveOrUpdateSms(params, function (res) {
            if (res.code == '0000') {
              that.$message({message: '操作成功', type: 'success'})
              that.getSmsInfo()
              that.disabledBtn = false
            } else {
              that.$message({message: '操作失败, ' + res.msg, type: 'error'})
              that.disabledBtn = false
            }
          })
        }
      }

    }

  }
</script>

<style lang="scss" scoped>
  .spanTop {
    padding-top: 8px;
    display: inline-block;
    font-size: 14px;
    color: #999999;
  }

  /deep/ .box-card {
    margin-bottom: 20px;
    width: 800px;
  }

  .dialog-footer {
    width: 800px;
  }

  .w1027 {
    /deep/ .el-form-item__content {
      width: 1030px;
      overflow: hidden;
    }
  }

  /deep/ .el-transfer-panel {
    width: 250px !important;
  }

  .page-container-detail {
    padding: 40px 40px 60px;
  }

  /deep/ .el-transfer-panel {
    width: 460px !important;
    height: 318px !important;
  }

  /deep/ .el-form-item__error {
    left: 170px;
  }

  .mb60 {
    margin-bottom: 60px;
  }

  .btnAlignment {
    text-align: center;

    /deep/ .el-button {
      width: 102px;
      height: 32px;
      margin-right: 60px;
    }
  }

  /deep/ .el-form-item__label {
    // margin-right: 20px;
    font-size: 18px;
  }

  /deep/ .el-transfer__buttons {
    button {
      display: block;
      margin-right: 0;
      margin-left: 0;
    }

    button:nth-child(1) {
      margin-bottom: 80px;
    }
  }

  /deep/ .el-form-item__label {
    width: 170px;
  }
</style>
